<template>
  <div class="login">
      <div class="login-form">
          <Form :model="loginForm" :label-width="0" :rules="loginRule" ref="loginForm">
            <label class="title">用户管理子系统</label>
            <FormItem prop="userName">
              <Input icon="person" v-model="loginForm.userName" ref="loginFocus" size="large" class="username" autofocus placeholder="请输入用户名"/>
            </FormItem>
            <FormItem prop="password">
              <Input icon="locked" v-model="loginForm.password" placeholder="请输入密码"  type="password" size="large" class="password"  @keyup.enter.native="login"/>
            </FormItem>
            <FormItem>
              <Button type="primary" long @click="login">登录</Button>
            </FormItem>
          </Form>
        </div>
        <div class="copyright">版权所有Copyright&copy;深圳市易世通达科技有限公司</div>
  </div>
</template>

<script type="text/ecmascript-6">
import Vue from 'vue'
import './login.css'
import axios from 'axios'
import {getLoginApi} from '../../http/login.api'
export default {
    name: 'Login',
    data () {
      return {
        loginRule: {
          userName: [
            { required: true, message: '用户名不能为空', trigger: 'blur' }
          ],
          password: [
            { required: true, message: '密码不能为空', trigger: 'blur' }
          ]
        },
        loginForm: {
            userName: '',
            password: ''
        }
      }
    },
    components: {
    },
    mounted() {
    /*this.$refs['loginFocus'].focus()*/
    },
    methods: {
      login () {
        this.$refs.loginForm.validate((valid) => {
          if (valid) {
              getLoginApi(this.loginForm).then(resp => {
                  const _this = this;
                  const result = resp.data.result
                  _this.$store.commit('login/setUserInfo', result)

                  _this.accessToken = result.accessToken
                  _this.id = resp.data.result.user.id
                  _this.employeeName = resp.data.result.user.employeeName
                  _this.avatar = resp.data.result.user.avatar
                  // console.log("this.id===="+resp.data.result.user.id)

                  if (_this.accessToken){
                      localStorage.setItem('accessToken',_this.accessToken);
                      localStorage.setItem('userName',_this.loginForm.userName);
                      localStorage.setItem('id',_this.id);
                      localStorage.setItem('employeeName',_this.employeeName);
                      localStorage.setItem('avatar',_this.avatar);
                      if (result.needModifyPWD) {
                          return _this.$router.push(`/password/${_this.id}`);
                      }
                      let destPath = sessionStorage.getItem('myPrevPath')
                      // console.log(destPath)
                      if (destPath!=='/'&&destPath!=='/login'&&destPath!=='/logout') {
                          // _this.$router.push(destPath||'/user');
                          _this.$router.push('/setting');
                      } else {
                          _this.$router.push('/setting');
                      }
                  }
                  _this.spinShow = false
              }).catch(err => {
                  this.$Message.error("错误代码【"+err.data.code+"】，"+err.data.message)
                  this.spinShow = false
              })
          }
        })
      }
    }
  }

</script>

<style>
.login {
  background: url('/static/image/login_background.jpg') no-repeat center center;
  display: flex;
  height: 100%;
  justify-content: center;
  align-items: center;
}
.login form {
  width: 500px;
  height: 283px;
  background: #313131;
  text-align: center;
}
.login form .title {
  color: #fff;
  display: block;
  text-align: center;
  font-size: 28px;
  height: 80px;
  line-height: 80px;
}
.login .username, .login .password {
  width: 410px;
  margin: auto;
}
.password{
  margin-top: 10px !important;
}
.login form button {
    display: block;
    height: 58px;
    width: 100%;
    margin-top: 28px;
    border-radius: 0;
    font-size: 28px;
}
.login .ivu-form-item-error-tip{
  left: 45px;
}
.copyright{
  color: #fff;
  letter-spacing: 1px;
  position: fixed;
  bottom: 0;
  font-size: 14px;
}
</style>

